<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="../static/style.css">

</head>
<body style="background-color: #ffecb5">

    <script type="module">
        import GoodsList from '../static/GoodsList.js';
        import ShoppingCart from '../static/ShoppingCart.js';
        let ADD_GOODS_EVENT="add_goods_event";
        let DELETE_EVENT="delete_event";
        let STEP_CHANGE_EVENT="step_change_event";
        let CHECKED_EVENT="checked_event";
        //监听添加商品事件
        document.addEventListener(ADD_GOODS_EVENT,addGoodsEvent);
        //监听删除商品事件
        document.addEventListener(DELETE_EVENT,deleteEvent);
        //监听改变商品数量事件
        document.addEventListener(STEP_CHANGE_EVENT,stepChangeEvent);
        //监听点击多选框事件
        document.addEventListener(CHECKED_EVENT,checkedEvent);
        //模拟商品列表数据
        var arr=[
            {id:"0001",img:"../static/gk.png",title:"Python挂科重修费用",desc:"挂一次补一次，挂多补多",price_desc:"130年历史最低价",price_now:"1320",price_pre:"1321",sale:"130",weight:"0",state:"1"},
            {id:"0006",img:"../static/python.jfif",title:"Python课本",desc:"下单即刻发货",price_desc:"南方学院史低价",price_now:"88",price_pre:"128",sale:"210",weight:"10",state:"1"},
            {id:"0007",img:"../static/shou.jpg",title:"林智宇的手",desc:"天价慎拍",price_desc:"永无最低价",price_now:"1300000",price_pre:"0",sale:"1",weight:"20",state:"1"},
            {id:"0010",img:"../static/lzy.jpg",title:"林智宇亲笔签名",desc:"全球限量13件",price_desc:"1天以来历史最低价",price_now:"1111",price_pre:"13",sale:"13",weight:"0.13",state:"1"},
            {id:"0011",img:"../static/dl.jpg",title:"朵拉入院照",desc:"为朵拉筹得治病金额！加油朵拉！",price_desc:"爱心永无价",price_now:"1",price_pre:"1",sale:"12345",weight:"0.5",state:"1"},
            {id:"0012",img:"../static/xxke.jfif",title:"卡尔的祝福",desc:"说：谢谢卡尔",price_desc:"赔钱货大甩卖",price_now:"25",price_pre:"19.9",sale:"45",weight:"0.15",state:"1"},
        ]
        //购物车列表数据
        var shopCartArr=[];
        //创建商品列表
        setGoodsList();
        function setGoodsList(){
            let div=document.createElement("div");
            div.className="clearfix";
            for(let i=0;i<arr.length;i++){
                let main = new GoodsList(arr[i],"./img/");
                main.appendTo(div);
            }
            document.body.appendChild(div);
        }
        //添加商品
        function addGoodsEvent(e){
            let arr=shopCartArr.filter(item=>item.id===e.list.id);
            if(arr.length===0){
                //如果该商品是第一次添加，执行下面的操作
                let data={
                    id:e.list.id,
                    //如果商品不可售卖，checked设为false
                    checked:e.list.state==1?true:false,
                    img:e.list.img,
                    title:e.list.title,
                    price:Number(e.list.price_now).toFixed(2),
                    num:1,
                    weight:e.list.weight,
                    subWeight:e.list.weight,
                    //state为1时，表示商品可售卖，为0时，表示不可售卖
                    state:e.list.state,
                    subPrice:Number(e.list.price_now).toFixed(2),

                }
                shopCartArr.push(data);
            }else{
                //如果该商品不是第一次添加，更改商品的数量
                arr[0].num++;
                arr[0].subWeight=(arr[0].num*arr[0].weight).toFixed(2);
                arr[0].subPrice=(arr[0].num*arr[0].price).toFixed(2);
            }
            //重新获取购物车数据
            setshoppingCart();
        }
        function deleteEvent(e){
            //删除商品
            shopCartArr=shopCartArr.filter(item=>item.id!==e.data.id);
            //重新获取购物车数据
            setshoppingCart();
        }
        function stepChangeEvent(e){
            //更改商品的数量、小计和重量
            shopCartArr.forEach(item=>{
                if(item.id===e.data.id){
                    item.num=e.num;
                    item.subPrice=(item.num*item.price).toFixed(2);
                    item.subWeight=(item.num*item.weight).toFixed(2);
                }
            })
            //重新获取购物车数据
            setshoppingCart();
        }
        function checkedEvent(e){
            if(e.data==="all"){
                //如果点击的是全选按钮
                shopCartArr.forEach(item=>{
                    //改变可售卖商品前面的checkbox状态
                    if(item.state==1) item.checked=e.tag.checked;
                })
            }else{
                //如果点击的是某个商品的checkbox，只改变它的checked值
                shopCartArr.forEach(item=>{
                    if(item.id===e.data.id) item.checked=e.tag.checked;
                })
            }
            //重新获取购物车数据
            setshoppingCart();
        }

        var shoppingCart;
        //创建购物车内容
        function setshoppingCart(){
            if(shoppingCart){
                //删除之前购物车的内容，重新创建
                shoppingCart.elem.remove();
                shoppingCart.elem=null;
            }
            shoppingCart=new ShoppingCart(shopCartArr);
            shoppingCart.appendTo("body");
        }
        var foot = document.getElementById('foot');

    </script>

<div style="width:200px;height:100px;position:relative;">
    <button style="position: absolute;bottom:0;" class="btn" onclick="alert('购买成功！')">结算</button>
</div>
<a href="/hello" class="btn">回到首页</a>
</body>
</html>
